<template>
	<view class="car-list w-full h-full flex-column">
		<view class="flex-1">
			<view class="item mb-20 flex-between align-center" v-for="(item,index) in carList" :key="item">
				<view class="car-number">
					<image src="../../../static/my/car-number.png"></image>
					<text>{{item.plate.replace(/,/g, "")}}</text>
				</view>
				<image @click="handleDetail(item)" class="unbundle" src="../../static/images/car-detail.png"></image>
			</view>
		</view>
		<view class="list-footer">
			<button class="buttom-primary-style-plain" @click="handleOpen">
				<u-icon class="mr-10" name="plus-circle-fill" size="35"></u-icon>
				新增车辆绑定</button>
		</view>
		<!-- <com-popup ref="popupadd">
			<carInfo-form @showSuccess="reload" />
		</com-popup> -->
	</view>
</template>

<script>
	// import ComPopup from '@/components/com-popup/index.vue'
	// import CarInfoForm from '../../../pages/my/components/car-info-form.vue'
	export default {
		props: {
			carList: {
				type: Array,
				default:() => []
			}
		},
		// components: {
		// 	ComPopup,
		// 	CarInfoForm
		// },
		data () {
			return {
				
			}
		},
		methods: {
			handleOpen () {
				this.$emit('openCarPlate')
			},
			handleDetail (item) {
				uni.navigateTo({
					url: '/pagesA/pages/my-car/car-detail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car-list{
		padding: 30rpx 30rpx 50rpx 30rpx;
		background: #FBFBFB;
		.item{
			height: 120rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			.unbundle{
				width: 32rpx;
				height: 32rpx;
			}
			.car-number{
				image{
					width: 30rpx;
					height: 30rpx;
					position: relative;
					top: 5rpx;
					margin-right: 10rpx;
				}
				text{
					font-family: PingFang SC;
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
				}
			}
		}
	}
	.list-footer{
		height: 86rpx;
	}
</style>